<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <!--bootstrap3-->
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/plugins/bootstraptable/bootstrap-table.min.css">
    <link rel="stylesheet" href="/css/style.css">



</head>
<body>
<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">课程信息</h3>
    </div>
    <div class="panel-body">
        <div style="display:inline-block;">

            <div style="float:left;padding:6px;">
                <span>课程名：</span>
            </div>
            <div style="float:left;">
                <input id="searchName" class="form-control" style="width:200px;" placeholder="请输入课程名" />
            </div>
            <div style="float:left;padding:6px;">
                <span>专业编号：</span>
            </div>
            <div style="float:left;">
                <!--                    <select id="gender" class="form-control" style="width:200px;">-->
                <!--                        <option value="">请选择</option>-->
                <!--                        <option value="男">男</option>-->
                <!--                        <option value="女">女</option>-->
                <!--                    </select>-->
                <input id="searchMid" class="form-control" style="width:200px;" placeholder="请输入编号" />
            </div>
            <div style="float:left;margin-left:20px;">
                <button id="query" class="btn btn-primary" onclick="search();">
                        <span class="glyphicon glyphicon-search">
		                </span> 查询
                </button>
                <button id="refresh" class="btn btn-default" onclick="resetList();">
                        <span class="glyphicon glyphicon-refresh">
		                </span> 刷新
                </button>
                <!-- Button trigger modal -->
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" onclick="preAdd();">
                        <span class="glyphicon glyphicon-plus">
                        </span>新增
                </button>
                <button type="button" class="btn btn-danger"   onclick="batchDelete();">
                        <span class="glyphicon glyphicon-trash">
                        </span>批量删除
                </button>
                <button type="button" id="upload" class="btn btn-info move1">
                    批量导入
                </button>

                <button type="button"  class="btn btn-warning" onclick="exportCourse();">
                    导出
                </button>

            </div>
        </div>
    </div>
</div>

<div class="box1">
    <table class="table table-bordered table-striped" id="stuTable"></table>
</div>


<!--批量导入模态框-->
<!--批量导入操作-->
<!-- 模态框（Modal） -->

<div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="ModalLabel">文件上传</h4>
            </div>
            <div class="modal-body">
                <input id="f_upload" type="file"  name="file"/>
            </div>

        </div>
    </div>
</div>


<!-- 学生Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">科目成绩信息</h4>
            </div>
            <div class="modal-body">
                <form id="formStudent">
                    <input hidden="hidden" id="id" name="id">
                    <div class="form-group">
                        <label for="cno">课程号</label>
                        <input type="text" class="form-control" id="cno" aria-describedby="emailHelp" placeholder="Enter cno" name="cno">
                    </div>
                    <div class="form-group">
                        <label for="cname">课程名</label>
                        <input type="text" class="form-control" id="cname" aria-describedby="emailHelp" placeholder="Enter cname" name="cname">
                    </div>

                    <div class="form-group">
                        <label for="chour">学时</label>
<!--                        <select class="form-control" id="chour" name="chour">-->
<!--                            <option value="男">男</option>-->
<!--                            <option value="女">女</option>-->
<!--                        </select>-->
                        <input type="text" class="form-control" id="chour" aria-describedby="emailHelp" placeholder="Enter chour" name="chour">
                    </div>

                    <div class="form-group">
                        <label for="credit">学分</label>
                        <input type="text" class="form-control" id="credit" aria-describedby="emailHelp" placeholder="Enter credit" name="credit">
                    </div>

                    <div class="form-group">
                        <label for="deptid">院系编号</label>
                        <input type="text" class="form-control" id="deptid" aria-describedby="emailHelp" placeholder="Enter deptid" name="deptid">
                    </div>

                    <div class="form-group">
                        <label for="mid">专业编号</label>
                        <input type="text" class="form-control" id="mid" aria-describedby="emailHelp" placeholder="Enter mid" name="mid">
                    </div>

                    <div class="form-group">
                        <label for="xkrs">选课人数</label>
                        <input type="text" class="form-control" id="xkrs" aria-describedby="emailHelp" placeholder="Enter xkrs" name="xkrs">
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="saveStudent();">
                    <span class="glyphicon glyphicon-floppy-save"></span>
                    保存
                </button>
            </div>
        </div>
    </div>
</div>

<!--&lt;!&ndash;学生详情&ndash;&gt;-->
<!--<div class="modal fade" tabindex="-1" role="dialog" id="detailModal">-->
<!--    <div class="modal-dialog" role="document">-->
<!--        <div class="modal-content">-->
<!--            <div class="modal-header">-->
<!--                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>-->
<!--                <h4 class="modal-title">个人成绩详情</h4>-->
<!--            </div>-->
<!--            <div class="modal-body">-->

<!--                <table class="table11_6">-->
<!--                    <tr>-->
<!--                        <td> <span>课程号：</span> </td>-->
<!--                        <td>-->
<!--                            <input type="text" class="form-control form1" id="no" aria-describedby="emailHelp" placeholder="Enter sno" name="sno" readonly="readonly">-->
<!--                        </td>-->
<!--                    </tr>-->
<!--                    <tr>-->
<!--                        <td> <span>姓名：</span></td>-->
<!--                        <td>-->
<!--                            <input type="text" class="form-control form1" id="sname" aria-describedby="emailHelp" placeholder="Enter sname" name="sname"  readonly="readonly">-->
<!--                        </td>-->

<!--                    </tr>-->
<!--                    <tr>-->
<!--                        <td> <span>课程号：</span></td>-->
<!--                        <td>-->
<!--                            <input type="text" class="form-control form1" id="cno" aria-describedby="emailHelp" placeholder="Enter cno" name="cno"  readonly="readonly">-->
<!--                        </td>-->
<!--                    </tr>-->
<!--                    <tr>-->
<!--                        <td> <span>课程名：</span></td>-->
<!--                        <td> <input type="text" class="form-control form1" id="cname" aria-describedby="emailHelp" placeholder="Enter cname" name="cname"  readonly="readonly"></td>-->
<!--                    </tr>-->

<!--                    <tr>-->
<!--                        <td><span>分数：</span></td>-->
<!--                        <td> <input type="text" class="form-control form1" id="score" aria-describedby="emailHelp" placeholder="score" name="score"  readonly="readonly"></td>-->
<!--                    </tr>-->


<!--                </table>-->
<!--            </div>-->
<!--            <div class="modal-footer">-->
<!--                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
<!--                &lt;!&ndash;        <button type="button" class="btn btn-primary">Save changes</button>&ndash;&gt;-->
<!--            </div>-->
<!--        </div>&lt;!&ndash; /.modal-content &ndash;&gt;-->
<!--    </div>&lt;!&ndash; /.modal-dialog &ndash;&gt;-->
<!--</div>&lt;!&ndash; /.modal &ndash;&gt;-->



<script src="/js/jquery-3.4.1.min.js"></script>
<script src="/plugins/bootstraptable/bootstrap-table.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/plugins/bootstraptable/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="/js/courseupload.js"></script>
<script src="/js/fileinput.min.js"></script>
<script src="/js/msg.js"></script>
<script>

    /**
     * 显示学生列表
     */
    function loadTable(){
        $("#stuTable").bootstrapTable({
            url: '/webapi/course/getbypage',
            striped:true, //设置为ture有隔行变色效果
            pagination:true,//设置为true会在底部显示分页条
            singleSelect: false,//设置为true将禁止多选
            pageSize:8,   //设置分页的每页条数
            pageList:[8],
            maintainSelected :true, //3,开启分页保持选择状态，就是用户点击下一页再次返回上一页,如果是客户端分页，这个设为true翻页后已经选中的复选框不会丢失
            pageNumber:1, //设置了分页，首页页码
            uniqueId : "id", //每一行的唯一标识，一般为主键列
            clickToSelect: true,
            sortName: "id",
            sortOrder: "asc",
            onSort:function (name,order){
                // params.sortName = name;
                // params.sortOrder = order;
                console.log(name);
                console.log(order);
            },
            sidePagination: "server", //设置在哪里进行分页，可选值为"client"或者
            queryParams:function (params){
                let paraObj = {
                    size: params.limit,
                    page: params.offset/params.limit,
                    sort: params.sort,
                    direct: params.order,
                    cname:$("#searchName").val(),
                    mid: $("#searchMid").val()
                };
                return paraObj;
            },
            /**
             * onClickCell: 单击单元格触发
             * field    点击单元格的字段名称
             * value    点击单元格的数据值
             * row      点击列的整行数据
             * $element 当前点击td的Dom元素
             */
            onClickCell:function (field,value,row,$element){
                $element.attr('contenteditable', true);
                //元素失去焦点事件
                $element.blur(function() {
                    //单元格修改后的的值
                    let tdValue = $element.html();
                    let index = $element.parent().data('index');

                    //updateCell更新某单元格数据
                    $("#stuTable").bootstrapTable('updateCell', {
                        index: index,       //行索引
                        field: field,       //列名
                        value: tdValue        //cell值
                    })

                    $.ajax ({

                        url:"/webapi/course/update",
                        method:"put",
                        data: row

                    }).done(function (rs) {
                        console.log(rs)
                        if (rs.code === 200){
                            $('#stuTable').bootstrapTable('destroy');
                            loadTable();
                            message.showText("success","更新成功")
                        }
                    });
                    console.log(field);
                    console.log(tdValue);
                    console.log(row);
                })
            },

            onLoadError:function (rs){
                console.log(rs)
                if (rs.code == 403){
                    window.location.href = "../../templates/login/user.html"
                }
            },
            responseHandler:function (res){
                console.log(res)
                return {
                    "total": res.data.total, // 总页数
                    "rows": res.data.rows    // 数据
                }
            },
            columns:[{
                checkbox: true,
                formatter:function (i,row) {  //每次加载checkbox时判断当前row的id是否已经存在全局Set()里
                    if($.inArray(row.id,overAllIds) !== -1)  { //判断数组里有没有这个id
                        return{
                            checked: true     //存在则选中
                        }
                    }else{
                        return {
                            checked: false
                        }
                    }
                }
            },{
                field: "id",
                title: "序号",
                sortable: true,
                align: "center"
            },{
                field: "cno",
                title: "课程号",
                sortable: true,
                align: "center"
            },{
                field: "cname",
                title: "课程名",
                sortable: true,
                align: "center"
            },{
                field: "chour",
                title: "学时",
                sortable: true,
                align: "center"
            },{
                field: "credit",
                title: "学分",
                sortable: true,
                align: "center"
            },{
                field: "deptid",
                title: "院系编号",
                sortable: true,
                align: "center"
            },{
                field: "mid",
                title: "专业编号",
                sortable: true,
                align: "center"
            },{
                field: "xkrs",
                title: "选课人数",
                sortable: true,
                align: "center"
            },{
                field: 'id',
                title: '操作',
                align: 'center',
                formatter: function(value,row,index){
                    // let e = "<a href='#' style='text-decoration: none;color: #0099CC;font-size: 14px' onclick='queryCourse("+row.id+");'>详情</a> "
                    // let e = "<a href='#' style='text-decoration: none;color: #0c4128' onclick='editStudent("+row.id+");'>编辑</a> "
                    // let d = "<a href='#' style='text-decoration: none;color: #0c4128' onclick='deleteStudent("+row.id+")'>删除</a>"
                    let e = "<button  class='btn btn-primary btn-xs' style='width: 60px;height: 30px' onclick='editStudent("+row.id+");'>" +
                        "<span class='glyphicon glyphicon-edit'></span>编辑</button> "
                    let d = "<button  class='btn btn-danger btn-xs' style='width: 60px;height: 30px' onclick='deleteStudent("+row.id+")'>" +
                        "<span class='glyphicon glyphicon-trash'></span>删除</button>"
                    return e + d;
                },width:250 //自定义修改，增加修改、删除标志
            }],
            formatNoMatches: function (){
                return "没有相关的匹配结果";
            },
            formatLoadingMessage:function (){
                return "请稍等，正在加载中...";
            }
        });
        // 点击时获取选中的行或取消选中的行，保存到全局 Array 里
        $('#stuTable').on('uncheck.bs.table check.bs.table check-all.bs.table uncheck-all.bs.table',function(e,rows){
            let datas = $.isArray(rows) ? rows : [rows];
            saveCheckState(e.type,datas);
        });
    }

    //定义全局的存储数组，用于存储复选框的标识
    let overAllIds = [];

    function saveCheckState(type, datas){
        if(type.indexOf('uncheck')===-1){
            $.each(datas,function(i,v){
                // 添加时，判断一行或多行的 id 是否已经在数组里 不存则添加
                overAllIds.indexOf(v.id) === -1 ? overAllIds.push(v.id) : -1;
            });
        }else{
            $.each(datas,function(i,v){
                overAllIds.splice(overAllIds.indexOf(v.id),1);    //删除取消选中行
            });
        }

        // console.log(overAllIds);
    }


    // function queryStudent(id){
    //     //查看按钮 显示模态框
    //     $("#detailModal").modal("show");
    //
    //     $.ajax({
    //         url:'/webapi/course/get/'+id
    //     }).done(function (rs){
    //         console.log(rs)
    //         if (rs.code === 200){
    //             let data = rs.data
    //             $("#id").val(data.id);
    //             $("#sno").val(data.sno);
    //             $("#sname").val(data.sname);
    //             $("#cno").val(data.cno);
    //             $("#cname").val(data.cname);
    //             $("#score").val(data.score);
    //         }
    //     })
    // }

    function exportCourse(){
        // $.ajax({
        //     url:"/webapi/export/student",
        //     method: "get"
        // }).done(function (rs){
        //     message.showText("success","导出成功")
        // })
        let form = $("<form>");
        form.attr("style","display:none");
        form.attr("target","");
        form.attr("method","get");
        form.attr("action","/webapi/export/course");
        $("body").append(form);
        form.submit();
        form.remove();
        // window.location.href = "/webapi/export/student";
        message.showText("success","导出成功");
    }
    /**
     * 批量删除
     */
    function batchDelete(){
        // let rows = $("#stuTable").bootstrapTable("getSelections");
        let len = overAllIds.length;
        if(len === 0){
            message.showText("success","请选择要删除的行");
        }else{
            if(confirm("你确定删除"+len+"条内容吗？")){
                let arr = [];
                for (let i = 0;i < len;i++){
                    arr.push(overAllIds[i]);
                }
                $.ajax({
                    url: '/webapi/course/batchdelete/'+arr,
                    method: 'delete'
                }).done(function (rs){
                    if (rs.code === 200){
                        $("#stuTable").bootstrapTable("destroy");
                        loadTable();
                        message.showText("success","批量删除成功");
                    }

                })
            };


        }

    }

    /**
     * 删除学生
     */
    function deleteStudent(id){
        if(confirm("您是否真的要删除该记录?")){
            $.ajax({
                url: '/webapi/course/delete/'+id,
                method: 'delete'
            }).done(function (rs){
                if (rs.code == 200){
                    alert("删除成功");
                    $("#stuTable").bootstrapTable("destroy");
                    loadTable();
                    message.showText("success","删除成功");
                }

            })
        }

    }

    /**
     * 点击新增时给id赋值，以便判断做新增操作
     */
    function preAdd(){
        $("#id").val(0);
        $("#cno").val("");
        $("#cname").val("");
        $("#chour").val("");
        $("#credit").val("");
        $("#deptid").val("");
        $("#mid").val("");
        $("#xkrs").val("");
    }

    // 修改之前获取学生信息
    function editStudent(id){
        $('#myModal').modal('show')
        $.ajax({
            url:'/webapi/course/get/'+id
        }).done(function (rs){
            console.log(rs)
            if (rs.code == 200){
                let data = rs.data
                $("#id").val(data.id);
                $("#cno").val(data.cno);
                $("#cname").val(data.cname);
                $("#chour").val(data.chour);
                $("#credit").val(data.credit);
                $("#deptid").val(data.deptid);
                $("#mid").val(data.mid);
                $("#xkrs").val(data.xkrs);
            }
        })
    }

    /**
     * 根据id判断是新增还是更新，判断之后做新增和更新操作
     */
    function saveStudent(){
        let data = $("#formStudent").serialize();
        let id = $("#id").val();
        if (id < 1){
            //是新增
            $.ajax ({
                url:"/webapi/course/insert",
                method:"post",
                data:data
            }).done(function (rs) {
                console.log(rs)
                if (rs.code == 200){
                    $('#stuTable').bootstrapTable('destroy');
                    loadTable();
                    $('#myModal').modal('hide');
                    message.showText("success","新增成功");
                }

            });
        } else {

            //是更新
            $.ajax ({

                url:"/webapi/course/update",
                method:"put",

                data:data

            }).done(function (rs) {
                if (rs.code == 200){
                    $('#stuTable').bootstrapTable('destroy');
                    loadTable();
                    $('#myModal').modal('hide');
                    message.showText("success","更新成功");
                }
            });
        }
    }

    /**
     * 刷新数据
     */
    function resetList(){
        $("#searchName").val("");
        $("#searchMid").val("");
        $('#stuTable').bootstrapTable("destroy");
        loadTable();
    }
    function search(){
        $("#stuTable").bootstrapTable("destroy");
        loadTable();
    }

    $(function (){
        loadTable();
        message.showText("success","获取成功");
    })
</script>

</body>
</html>